import { Image, Button } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, remove } from "@/api/package";
import { PlusOutlined } from "@ant-design/icons";
import { history } from "umi";
import { filterPackageType } from "@/const";

const Package = () => {
  const columns = [
    {
      title: "类型",
      dataIndex: "type",
      width: 150,
      search: false,
      render: (_, record) => {
        return filterPackageType(record.type);
      },
    },
    {
      title: "名称",
      dataIndex: "name",
      width: 150,
    },
    {
      title: "数量",
      dataIndex: "specification",
      width: 150,
      search: false,
    },
    {
      title: "售卖价",
      dataIndex: "sellPrice",
      width: 150,
      search: false,
    },
    {
      title: "支付价格",
      dataIndex: "payPrice",
      width: 150,
      search: false,
    },
    {
      title: "图片",
      dataIndex: "images",
      search: false,
      render: (_, record) => {
        return <Image width={100} height={100} src={record.images[0]} />;
      },
    },
  ];

  return (
    <PageContainer>
      {useCommonTable({
        title: "书包",
        columns,
        modalWidth: 700,
        fetchList,
        remove,
        renderEdit: (record) => {
          return (
            <>
              <Button
                key="add"
                type="primary"
                onClick={() => {
                  history.push(`/package/index/edit?id=${record.id}`);
                }}
              >
                编辑
              </Button>

              <Button
                key="spec"
                type="ghost"
                onClick={() => {
                  history.push(
                    `/package/index/specification?id=${record.id}&type=${record.type}&cycle=${record.cycle}&specification=${record.specification}`
                  );
                }}
              >
                规格管理
              </Button>
            </>
          );
        },
        renderAdd: () => {
          return (
            <Button
              key="add"
              icon={<PlusOutlined />}
              type="primary"
              onClick={() => {
                history.push(`/package/index/edit`);
              }}
            >
              新增书包
            </Button>
          );
        },
        layout: "horizontal",
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};

export default Package;
